<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<fieldset class="form-container " style="width:80%;margin-left:5%;"> 
    <form:form id="form_782213" method="post" action="/bulletin/search.do" modelAttribute="searchBulletin" autocomplete="off">
        <legend class="form-title"><h2>Recherche d'un bulletin</h2></legend>
        <form:errors path="*" cssClass="errorblock" element="div"></form:errors>
            <div style="float: left;position: relative;">
                <div class="form-title">Num&eacute;ro bulletin</div>
            <form:input class="form-field" type="text" path="numero" tabindex="1"/>
            <div class="form-title">Nom employ&eacute; </div>
            <form:input class="form-field" type="text" path="nomEmploye" tabindex="3"/>



        </div>
        <div style="float: left;position: relative;">
            <div class="form-title">Nom Pr&eacute;nom Adh&eacute;rent</div>
            <form:input class="form-field" type="text" path="nomPrenomAdherent" tabindex="2"/>
            <div class="form-title">Pr&eacute;nom employ&eacute;</div>
            <form:input class="form-field" type="text" path="prenomEmploye" tabindex="3"/>

        </div>



        <div class="submit-container" style=" clear: left;">
            <form:button class="submit-button" type="submit" >Rechercher</form:button>
                <a href="/bulletin/index.do" class="submit-button">Annuler</a>
            </div>
    </form:form>
</fieldset>


<c:choose>
    <c:when test="${listBulletin==null}"> </c:when>
    <c:when test="${listBulletin.size()==0}"> <div class="info message" style="margin-top: 15%;">Pas de r&eacute;sultat</div></c:when>
    <c:otherwise>


        <div  style="margin-top: 10%;">
            <table id="myTable"  class="tablesorter">
                <thead>
                    <tr>
                        <th>Contrat</th>
                        <th>Periode</th>
                        <th>Num&eacute;ro bulletin</th>
                        <th>Etat</th>
                        <th> Lien</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <!--<tfoot><tr><td colspan="4"><div id="paging"><ul><li><a href="#"><span>Previous</span></a></li><li><a href="#" class="active"><span>1</span></a></li><li><a href="#"><span>2</span></a></li><li><a href="#"><span>3</span></a></li><li><a href="#"><span>4</span></a></li><li><a href="#"><span>5</span></a></li><li><a href="#"><span>Next</span></a></li></ul></div></tr></tfoot>-->



                <tbody>
                    <c:forEach var="bulletin" items="${listBulletin}" varStatus="vs">
                        <tr>
                            <td>
                                 <a href="/contrat/show.do?id=${bulletin.contrat.id}">${bulletin.contrat.adherent.nomPrenom}-${bulletin.contrat.employe.nom}&nbsp;${bulletin.contrat.employe.prenom}</a>
                            </td> 
                            <td>
                              <fmt:formatDate pattern="MM yyyy"  value="${bulletin.periode}"  /> 
                            </td>
                            <td>${bulletin.numero}</td>
                            <td>${bulletin.etatBulletin}</td>
                            <td>
                                 <a href="/download/Bulletin/get.do?id=${bulletin.id}">T&eacute;l&eacute;charger</a>
                            </td>
                            
                             <td> <a href="/bulletin/show.do?id=${bulletin.id}" >Consulter</a><br/>
                                <c:if test="${bulletin.etatBulletin!='declare' &&  bulletin.etatBulletin!='archive'}"> <a id="updateBulletin${bulletin.id}" href="/bulletin/update.do?id=${bulletin.id}" >Modifier</a><br/>

                                    <a id="delBulletin" href="/bulletin/delete.do?id=${bulletin.id}">Supprimer</a><br/>
                                </c:if>
                               
                                <c:if test="${bulletin.etatBulletin=='imprime'}"> 
                                    <script>
                                        $(function() {
                                            $("#dialog${bulletin.id}").dialog({
                                                autoOpen: false,
                                                modal: true,
                                                buttons: {
                                                    "Confirmer": function() {

                                                        $(this).dialog("close");
                                                        window.location = "/bulletin/update.do?id=${bulletin.id}";
                                                    },
                                                    "Annuler": function() {
                                                        $(this).dialog("close");
                                                    }
                                                }
                                            });

                                            $("#updateBulletin${bulletin.id}").click(function(e) {
                                                e.preventDefault();
                                                $("#dialog${bulletin.id}").dialog("open");
                                            });
                                        });
                                    </script>

                                    <div id="dialog${bulletin.id}" title="Confirmer la modification">
                                        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Le bulletin a &eacute;t&eacute; d&eacute;j&agrave; t&eacute;l&eacute;charg&eacute;.<br/>
                                            Voulez vous le modifier ?
                                        </p>
                                    </div>

                                </c:if>
                            </td>
                        </tr>

                    </c:forEach>

                </tbody>
            </table>
            <div id="pager" class="pager">
                <form>
                    <img src="/img/first.png" class="first">
                    <img src="/img/prev.png" class="prev">
                    <input type="text" class="pagedisplay">
                    <img src="/img/next.png" class="next">
                    <img src="/img/last.png" class="last">
                    <select class="pagesize">
                        <option selected="selected" value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                    </select>
                </form>
            </div>

        </div>
    </c:otherwise>

</c:choose>

<script>
    $(function() {


        $("table").tablesorter({widgets: ['zebra']}).tablesorterPager({container: $("#pager")});

    });
</script>